<template>
  <view class="conter">
    <view class="main">
      大爆炸思维账号注销将会对您产生如下影响:</br></br>
      1.一旦注销，您将无法登录、使用该账号登录/使用/继续使用大爆炸思维产品及服务;</br></br>
      2.一旦注销，您曾通过该账号登录、使用的大爆炸思维产品与服务下的所有内容、信息、数据、记录将会被删除或匿名化处理，您也无法再检索、访问、获取、继续使用和找回，也无权要求我们找回(但法律法规另有规定或监管部门门另有要求的除外) ;</br></br>
      3.您申请账号注销的行为即表明您同意放弃该账号在大爆炸思维产品与服务使用期间已产生的但未消耗完毕的权益及未来的预期利益，我们将会对该账号下的全部权益做清除处理;</br></br>
      4.一旦注销完成，账号将无法恢复，您将无法使用账号登录大爆炸思维产品，也将无法找回在账号使用过程中产生的任何内容或信息;</br></br>
      5.大爆炸思维账号一旦注销，您与我们曾签署过的相关用户协议、其他权利义务性文件等相应终止(但我们与您之间已约定继续生效的或法律法规另有规定的除外) ;</br></br>
      更多注销问题，详见<text style="color: #007AFF;" @click="privacy">大爆炸思维账号注销须知。</text>
    </view>
    <view class="footer">
      <view class="check-title">
        <checkbox-group @change="checkboxChange">
          <checkbox value="agreement" style="transform:scale(0.7)" color="#FF800C"></checkbox>
        </checkbox-group>
       <view>
         我已清楚注销风险，确定申请注销账号
       </view>
      </view>
      <view class="service-btn" :class="checkboxState.length ? 'backg-color btn-zoom' : ''" @click="addService">
        致电客服继续注销账号
      </view>
    </view>
  </view>
</template>

<script>
  export default {
  	data() {
  		return {
        agreement: '', // 多选框
        checkboxState: [] // 多选框状态
      }
    },
    onLoad() {
      this.$wechat.unseBehavior()
    },
    methods:{
      // 跳注册须知
      privacy() {
        uni.navigateTo({
          url: '/pages/my/protocol/logoutInform'
        })
      },
      // 多选框事件
      checkboxChange(e) {
        this.checkboxState = e.detail.value
      },
      // 打电话给客服
      addService() {
        if(this.checkboxState.length){
          uni.makePhoneCall({
            phoneNumber: '18124596051' //仅为示例
          });
        }else{
          uni.showToast({  title:'请勾选注销风险须知',icon:'none' });
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .conter{
    font-size: 28rpx;
    color: #262626;
    text-align: justify;
    .main{
       padding: 50rpx 40rpx 300rpx 40rpx;
       // margin: 50rpx 0 200rpx 0;
    }
    .check-title{
      display: flex;
      align-items: center;
      justify-content: center;
      uni-checkbox  /deep/ .uni-checkbox-input{
        border-radius: 50%;
      }
     /deep/ .uni-checkbox-input:hover {
        border-color: #FF800C;
     }
    }
    .footer{
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      padding:3rpx 40rpx 20rpx 40rpx;
      background: #FFFFFF;
      .service-btn{
        width: 100%;
        padding: 18rpx 0;
        background: #999999;
        border-radius: 44rpx;
        text-align: center;
        font-size: 36rpx;
        color: #FFFFFF;
        margin-top: 10rpx;
        margin-bottom: env(safe-area-inset-bottom);
      }
      .backg-color{
        background: #FF800C;
      }
    }
  }
</style>
